
<template>
    <!-- -->
    <el-cascader show-all-levels @visible-change='visiblechange' :props='props' :options="projectTree" placeholder='请选择子任务' v-model="taksId" clearable @change="changID">
        <template slot-scope="{ node, data }">
            <!-- <div class="projdiv">
          <div v-if="data.inputtype" style="position: absolute; top:0;left:0;height:25px;z-index:10;width:95%;padding-left:6%">
          	<el-input size="small" v-focus ref="projname"  placeholder="请输入内容" prefix-icon="el-icon-search" v-model="projinput" @input="changprojinput"></el-input>
          </div>
        </div> -->
            <div v-if="data.projId!=null" class="cascaderdiv"></div>
            <span>{{data.name}}</span>
        </template>
    </el-cascader>
</template>
<script>
// import { getTreeData } from "@/api/task";
import { getMeetTask, getTaskList } from "@/api/task";
import utils from "@/utils/utils";
export default {
    props: ["taskproject", "taskMeet"],
    data() {
        let _this = this;
        return {
            taksId: [],
            timer: null,
            id: "",
            projectTree: [],
            current: 1,
            size: 20,
            props: {
                multiple: true,
                label: "name",
                emitPath: false,
                checkStrictly: true,
                value: "taskId",
            },
        };
    },
    created() {
        //  this.listclick();
        if (!utils.isNull(this.taskproject)) {
            this.id = this.taskproject;
        }
    },
    mounted() {},
    directives: {
        focus: {
            inserted: function (el) {
                // el.children[1].focus()
                el.querySelector("input").focus();
            },
        },
    },
    watch: {
        taskproject(val, oldval) {
            this.id = val;
        },
        taskMeet: {
            handler(newName, oldName) {
                this.taksId = newName;
                this.listclick();
            },
            // immediate: true,
            deep: true,
        },
    },
    methods: {
        // 递归判断列表，把最后的children设为undefined
        getData(data) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].children.length < 1) {
                    // children若为空数组，则将children设为undefined
                    data[i].children = undefined;
                } else {
                    // children若不为空数组，则继续 递归调用 本方法
                    this.getData(data[i].children);
                }
            }
            return data;
        },

        visiblechange(data) {
            console.log("this.id");
            console.log(this.id);
            if (data == true) {
                if (utils.isNull(this.id)) {
                    return this.$message("请选择项目");
                }
                if (utils.isNull(this.taskMeet)) {
                    this.listclick();
                }
            }
        },
        changprojinput(data) {
            console.log(data);
            this.projinput = data;
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.listclick();
            }, 500);
        },
        changID(val) {
            console.log(val);
            if (val.length > 0) {
                this.$emit("parenIdtchange", val.toString());
            } else {
                this.$emit("parenIdtchange", "");
            }
        },
        childrendata(data) {
            data.forEach((element) => {
                if (element.children == null) {
                    this.$delete(element, "children");
                } else {
                    this.childrendata(element.children);
                }
            });
            return data;
        },
        // async getAreaForLazyLoad(node, resolve) {
        //     if (node.level >= 1) {
        //         if (!utils.isNull(node.data.data.taskLevel)) {
        //             let level = Number(node.data.data.taskLevel) + 1;
        //             let nodes = await getTreeData({
        //                 level: level,
        //                 parentId: node.data.data.taskId,
        //                 projId: this.id,
        //             });
        //             let data = this.childrendata(nodes.data.data);
        //             this.$nextTick(function () {
        //                 this.$refs.projname.$el.querySelector("input").focus();
        //             });
        //             resolve(data);
        //         }
        //     }
        // },
        async listclick() {
            var _this = this;
            let params = new URLSearchParams();
            params.append("current", this.current);
            params.append("size", this.size);
            // params.append('name',this.projinput)
            params.append("projIds", this.id);
            let res = await getMeetTask(params);
            res.data.forEach((data) => {
                data.taskId = "";
            });
            this.projectTree = this.getData(res.data);
        },
        load(node) {
            console.log("ssssssssssssssssssssssssnode");
        },
    },
};
</script>

<style scoped>
.cascaderdiv {
    width: 17px;
    background-color: #fff;
    height: 17px;
    position: absolute;
    top: 10px;
    left: 18px;
    z-index: 20;
}
/* /deep/.el-cascader-node:not(.is-disabled):hover{
    
    } */
    .cascaderdiv:hover{
        width: 17px;
        background-color: rgb(245, 247, 250);
        height: 17px;
        position: absolute;
        top: 10px;
        left: 18px;
        z-index: 20;
    }
</style>
